import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
import Color from "../common/Color";
import TabBarItemComponent from "../widgets/TabBarItemComponent";
import MovieListScreen from "./MovieListScreen";
import GankTodayScreen from './GankTodayScreen';

export default class RootScreen extends Component {

  constructor(props) {
    super(props);
    StatusBar.setBarStyle('light-content')
    StatusBar.setBackgroundColor('#2196f3')
  }

  render() {
    return (
      <Navigator />
    )
  }
}

const Tab = TabNavigator(
  {
    Init: {
      screen: GankTodayScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '今日热门',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItemComponent
            tintColor={tintColor}
            focused={focused}
            normalImage={require('../../assets/image/playing.png')}
            selectedImage={require('../../assets/image/playing-active.png')}
          />
        )
      }),

    },
    First: {
      screen: MovieListScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '正在热映',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItemComponent
            tintColor={tintColor}
            focused={focused}
            normalImage={require('../../assets/image/playing.png')}
            selectedImage={require('../../assets/image/playing-active.png')}
          />
        )
      }),

    },
    Second: {
      screen: MovieListScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '即将上映',
        tabBarIcon: ({ focused, tintColor }) => (
          <TabBarItemComponent
            tintColor={tintColor}
            focused={focused}
            normalImage={require('../../assets/image/coming.png')}
            selectedImage={require('../../assets/image/coming-active.png')}
          />
        )
      })
    }
  },
  {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    lazy: true,
    tabBarOptions: {
      activeTintColor: Color.themeColor,
      inactiveTintColor: '#888888',
      style: { backgroundColor: '#ffffff' }
    }
  }
);

const Navigator = StackNavigator(
  {
    Tab: { screen: Tab },
  },
  {
    navigationOptions: {
      headerBackTitle: null,
      headerTintColor: '#ffffff',
      headerStyle: { backgroundColor: Color.themeColor },
      showIcon: true
    }
  }
);

